Vue 父子组件通信之 v-model

北京最近的天，可真是热啊

Vue 组件间通信

Vue 组件间通信是个老生常谈的问题，在开发中几乎必定会遇到。下面我们先来谈一下基本的通信方法

父传子

• props
• $children

  子传父

• 父组件传递函数给子组件，子组件通过 $emit 触发
• 修改父组件的 props
• 通过 $parent 访问父组件

  兄弟组件

• EventBus

当然了，你也可以用 vuex 解决一切

---

今天就来谈一种平时不经常用的通信方式， v-model

通过 v-model 进行父子组件通信

我们先用传统的方式来实现组件通信

父组件:

<template>
  <div class="parent">
    <child :index="index" @decrease="decrease"></child>
    <button @click="increase">增加</button>
  </div>
</template>

<script>
  import Child from './child'
  export default {
    name: 'parent',
    components: {
      Child
    },
    data() {
      return {
        index: 0
      }
    },
    methods: {
      increase () {
        this.index++
      },
      decrease () {
        this.index--
      }
    }
  }
</script>

子组件:

<template>
  <div class="child">
    <div>{{ index }}</div>
    <button @click="decrease">减少</button>
  </div>
</template>

<script>
  export default {
    name: 'child',
    props: {
      index: Number
    },
    methods: {
      decrease: function () {
        this.$emit('decrease')
      }
    }
  }
</script>

这是平时用到比较多的一种方式。

v-model 父子通信

那么，如果用 v-model 是什么样的呢？

先来看代码

<template>
  <div class="parent">
    <child v-model="index"></child>
    <button @click="increase">增加</button>
  </div>
</template>

<script>
  import Child from './child'
  export default {
    components: {
      Child
    },
    data() {
      return {
        index: 0
      }
    },
    methods: {
      increase () {
        this.index++
      }
    }
  }
</script>

<template>
  <div class="child">
    <div>{{ value }}</div>
    <button @click="decrease">减少</button>
  </div>
</template>

<script>
  export default {
    props: {
      value: Number
    },
    methods: {
      decrease: function () {
        this.$emit('input', this.value - 1)
      }
    }
  }
</script>

是不是比之前的实现方式简便了许多呢？

原理解析

<child v-model="index"></child> 实际上是 <input v-on:input="index = arguments[0]" :value="index"> 这样是不是就好理解了？

v-model 实际上是个语法糖

<input v-model="searchText">

等价于

<input
  v-bind:value="searchText"
  v-on:input="searchText = $event.target.value"
>

当作用在组件上时

<custon-input 
    v-bind:value="something" v-on:input="something=arguments[0]">
</custom-input>

所以要让组件的 v-model 生效，它应该：

1. 接受一个 value 属性
2. 在 value 变化时触发 input 事件

父子通信，还有一种 .sync 的方法， 跟 v-model 差不多，官方更推荐用 .sync 多一些

赏

谢谢你请我吃糖果